<template>
  <el-drawer
    title="订单详情"
    :visible.sync="drawer"
    :direction="direction"
    size="28%"
    :modal="false"
  >
    <div class="header">
      <img src="~@/assets/img/userLogo.png" />
      <div class="mid">
        <div>
          <span>{{ $CryptoJS.decrypt(dataForm.guestName2) }}</span>
          <!-- <span>
                    <template v-if="dataForm.status == 0"> 待支付 </template>
                    <template v-if="dataForm.status == 1"> 已支付 </template>
                    <template v-if="dataForm.status == -1"> 已取消 </template>
                    <template v-if="dataForm.status == -2"> 退款中 </template>
                    <template v-if="dataForm.status == -3"> 已退款 </template>
                    <template v-if="dataForm.status == 3"> 已完成 </template></span> -->
        </div>
        <div>{{ dataForm.guestPhone }}</div>
      </div>
      <div class="right">
        来源：<span>{{ dataForm.guestSourceName }}</span>
      </div>
    </div>
    <div class="contentBox">
      <div class="subtit">订单信息</div>
      <div class="box">
        <div class="top">
          <img src="~@/assets/img/orderIcon.png" />
          <span>{{ dataForm.houseBaseName }}</span>
          <span>{{ dataForm.orderStatus | delStatus }}</span>
        </div>
        <el-row class="row">
          <el-col :span="10" class="li">
            入住日期：{{
              dataForm.arriveDate && dataForm.arriveDate.substring(0, 10)
            }}
          </el-col>
          <el-col :span="14" class="li">
            离店日期：{{
              dataForm.leaveDate && dataForm.leaveDate.substring(0, 10)
            }}
          </el-col>
          <el-col :span="10" class="li"> 入住时长：{{ dataForm.num }} </el-col>
          <el-col :span="14" class="li">
            订单号：{{ dataForm.orderCode }}
          </el-col>
          <el-col :span="10" class="li">
            房费：{{ dataForm.orderAmount }}
          </el-col>

          <el-col :span="14" class="li">
            创建时间:{{ dataForm.orderTime }}
          </el-col>
          <el-col :span="10" class="li"> 备注：{{ dataForm.remarks }} </el-col>
          <el-col :span="14" class="li" v-if="dataForm.status == -1">
            取消原因：{{ dataForm.refundReason }}
          </el-col>
        </el-row>
      </div>
      <div class="subtit">
        收款信息
        <div
          class="addMoney"
          @click="dialogFormVisible2 = true"
          v-if="
            ($hasPermission('guest:roomInfo:addFlow') &&
              dataForm.orderStatus == 2) ||
            dataForm.orderStatus == 1
          "
        >
          <img src="~@/assets/img/moneyIcon.png" />
          添加收款
        </div>
      </div>
      <div class="box" v-if="dataForm.detailFormList[0]">
        <el-row class="row">
          <el-col :span="8" class="li">
            早餐：{{ dataForm.detailFormList[0].breakfastAmount }}
          </el-col>
          <el-col :span="8" class="li">
            商品消费：{{ dataForm.detailFormList[0].otherAmount }}
          </el-col>
          <el-col :span="8" class="li">
            已收款：{{ dataForm.realityPay }}
          </el-col>
          <el-col :span="8" class="li">
            待收款：<span class="red">
              {{ dataForm.orderAmount - dataForm.realityPay }}
            </span>
          </el-col>
          <el-col :span="8" class="li">
            退款金额 ：<span class="red">
              {{ dataForm.refundAmount }}
            </span>
          </el-col>
        </el-row>
      </div>
      <div class="subtit">餐饮订单信息</div>
      <div
        class="box"
        v-if="dataForm.repastList && dataForm.repastList.length > 0"
      >
        <div
          class="top"
          v-for="(item, index) in dataForm.repastList"
          :key="index"
        >
          <div class="top" style="padding: 0">
            <span style="margin: 0"
              >{{ item.comboName }}( 预约时间:{{ item.repastTime }})</span
            >
            <span
              class="ss"
              :style="{ background: scolor[item.orderStatus] }"
              >{{ repastStr[item.orderStatus] }}</span
            >
          </div>
          <el-row class="row">
            <el-col :span="14" class="li">
              预约人姓名:{{ item.guestName }}
            </el-col>
            <block v-if="item.comboType == 1">
              <el-col :span="10" class="li"> 成人人数:{{ item.num }} </el-col>
              <el-col :span="10" class="li">
                儿童人数:{{ item.repastNum }}
              </el-col>
            </block>
            <block v-if="item.comboType == 2">
              <el-col :span="10" class="li"> 就餐份数:{{ item.num }} </el-col>
            </block>
            <el-col :span="14" class="li">
              订单号：{{ item.orderCode }}
            </el-col>
            <el-col :span="10" class="li"> 价格:{{ item.orderAmount }} </el-col>
            <el-col :span="14" class="li"> 备注:{{ item.remarks }} </el-col>
          </el-row>
        </div>
      </div>
      <div class="footer">
        <div class="left">
          订单总额: <span>￥{{ dataForm.orderAmount }}</span>
        </div>
        <div class="right">
          <el-button
            type="primary"
            size="mini"
            @click="confirmOrder()"
            v-if="
              $hasPermission('hotel:hotelorder:confirm') &&
              dataForm.orderStatus == -1
            "
            >确认订单</el-button
          >
          <el-button
            type="info"
            @click="checkData()"
            size="mini"
            v-if="
              // $hasPermission('hotel:hotelorder:cancelOrder') &&
              dataForm.orderStatus == -1
            "
            >取消订单</el-button
          >
          <template v-if="dataForm.orderStatus == 1">
            <el-button type="info" @click="checkData()" size="mini"
              >取消订单</el-button
            >
            <el-button
              v-if="$hasPermission('hotel:hotelorder:update')"
              type="primary"
              size="mini"
              plain
              @click="editOrder(dataForm.orderStatus)"
              >编辑订单</el-button
            >
            <el-button
              v-if="$hasPermission('hotel:hotelorder:update')"
              type="primary"
              @click="editOrder(2)"
              size="mini"
              >办理入住</el-button
            >
          </template>
          <template v-if="dataForm.orderStatus == 2">
            <el-button
              v-if="$hasPermission('hotel:hotelorder:orderRefund')"
              type="info"
              plain
              size="mini"
              @click="orderRefund(dataForm.orderCode)"
              >申请退款</el-button
            >
            <el-button
              v-if="$hasPermission('hotel:hotelorder:update')"
              type="primary"
              plain
              size="mini"
              @click="editOrder(dataForm.orderStatus)"
              >编辑订单</el-button
            >
            <el-button type="info" @click="checkoutRoom()" size="mini"
              >办理退房</el-button
            >
          </template>
        </div>
      </div>
    </div>
    <!-- 弹窗,  修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      :orderStatus="orderStatus"
      @refreshDataList="
        getInfo();
        refreshTop();
      "
    ></add-or-update>
    <!-- 取消订单 -->
    <el-dialog
      class="roomStatus"
      title="取消订单"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      width="30%"
    >
      <el-form :model="check" style="padding: 30px 0 20px">
        <el-form-item label="退款原因" label-width="120px">
          <el-input v-model="check.refundReason" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCheck()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 申请退款 -->
    <el-dialog
      class="roomStatus"
      title="申请退款"
      :visible.sync="dialogFormVisible3"
      :append-to-body="true"
      width="30%"
    >
      <el-form :model="refund" ref="refund" :rules="refundRule">
        <el-form-item label="退款金额" label-width="80px" prop="refundAmount">
          <el-input v-model="refund.refundAmount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="退款原因" label-width="80px" prop="refundReason">
          <el-input v-model="refund.refundReason" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button :disabled="!canRefund" type="primary" @click="confirmRefund()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加收款记录 -->
    <el-dialog
      class="roomStatus"
      :append-to-body="true"
      title="添加收款记录"
      :visible.sync="dialogFormVisible2"
      width="30%"
    >
      <el-form :model="form" ref="form" :rules="formRule" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="类型" prop="flowType">
              <el-radio-group v-model="form.flowType">
                <el-radio :label="1">收款</el-radio>
                <el-radio :label="2">退款</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式" prop="payType" style="width: 100%">
              <el-select
                v-model="form.payType"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option label="微信" value="1"> </el-option>
                <el-option label="支付宝" value="2"> </el-option>
                <el-option label="云闪付" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="amount">
              <el-input
                v-model="form.amount"
                placeholder="金额"
                type="number"
                min="1"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                placeholder="备注"
                type="textarea"
                rows="2"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div></div>
        <div class="right">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </el-drawer>
</template>

<script>
import AddOrUpdate from "./createOrder";
var that;
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      addOrUpdateVisible: false,
      drawer: false,
      repastStr: {
        "-2": "待支付",
        1: "未核销",
        2: "已核销",
        4: "已取消",
        5: "已退款",
      },
      scolor: {
        "-2": "#FF4141",
        "-1": "#FEA400",
        1: "#FEA400",
        2: "#A9B4C1",
        3: "#A9B4C1",
        4: "#A9B4C1",
        5: "#A9B4C1",
      },
      direction: "rtl",
      dataForm: {
        id: "",
      },
      refund: {
        orderCode: "",
        refundAmount: "",
        refundReason: "",
      },
      check: {
        initiator: 1,
        refundReason: "",
        status: -1,
        orderCode: "",
      },
      orderStatus: "",
      payState: [
        {
          val: 4,
          label: "已取消",
        },
        {
          val: -2,
          label: "待支付",
        },
        {
          val: -1,
          label: "待确定",
        },
        {
          val: 1,
          label: "已预订",
        },
        {
          val: 2,
          label: "已入住",
        },
        {
          val: 3,
          label: "已退房",
        },
        {
          val: 5,
          label: "已退款",
        },
      ],
      form: {
        merchantId: "",
        orderCode: "",
        amount: 0,
        flowType: "",
        payType: "",
        remark: "",
      },
      flag: false,
      canRefund: true,
    };
  },
  filters: {
    delStatus(val) {
      let d = that.payState.filter((item) => item.val == val);
      return d[0].label;
    },
  },
  created() {
    that = this;
  },
  components: {
    AddOrUpdate,
  },
  computed: {
    refundRule() {
      return {
        refundAmount: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
    formRule() {
      return {
        flowType: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        payType: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        amount: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    init() {
      this.drawer = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    clearFrom() {
      this.$refs["form"].resetFields();
    },
    save() {
      this.form.merchantId = this.dataForm.homestayId;
      this.form.orderCode = this.dataForm.orderCode;
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.$http
          .post("/hotel/guest/room/saveMerchantFlowRecord", this.form)
          .then((res) => {
            if (res.data.code != 0) {
              return this.$message.error(res.data.msg);
            }
            this.clearFrom();
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                this.dialogFormVisible2 = false;
                this.getInfo();
              },
            });
          });
      });
    },
    refreshTop() {
      this.$emit("refreshDataList");
    },
    // 编辑
    editOrder(status) {
      this.addOrUpdateVisible = true;
      if (status) {
        this.orderStatus = status;
      }
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = this.dataForm.id;
        this.$refs.addOrUpdate.init();
      });
    },
    //确认订单
    confirmOrder() {
      this.$confirm("确定该操作？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(() => {
          this.$http
            .get(`/hotel/order/confirm/${this.dataForm.id}`)
            .then((res) => {
              if (res.data.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            });
        })
        .catch(() => {});
    },
    //取消订单
    checkData() {
      this.dialogFormVisible = true;
      this.check.orderCode = this.dataForm.orderCode;
    },
    confirmCheck() {
      if (!this.flag) {
        this.flag = true;
      } else {
        return;
      }
      this.$http.post("/hotel/order/cancelOrder", this.check).then((res) => {
        if (res.data.code !== 0) {
          this.flag = false;
          return this.$message.error(res.data.msg);
        }
        this.dialogFormVisible = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 500,
          onClose: () => {
            this.visible = false;
            this.$emit("refreshDataList");
          },
        });
      });
    },
    //办理退房
    checkoutRoom() {
      this.$confirm("确定该操作？", this.$t("prompt.title"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(() => {
          this.$http
            .get(`/hotel/order/checkout/${this.dataForm.id}`)
            .then((res) => {
              console.log(res);
              if (res.data.code !== 0) {
                return this.$message.error(res.data.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            });
        })
        .catch(() => {});
    },
    //申请退款
    orderRefund(orderCode) {
      this.dialogFormVisible3 = true;
      this.refund.orderCode = orderCode;
    },
    //确定退款
    confirmRefund() {
      this.$refs["refund"].validate((valid) => {
        if (!valid) {
          return false;
        }

        this.canRefund = false;
        this.$http
          .post("/hotel/order/hotelOrderRefund", this.refund)
          .then((res) => {
            if (res.data.code != 0) {
              this.canRefund = true;
              return this.$message.error(res.data.msg);
            }
            this.$refs["refund"].resetFields();
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                this.dialogFormVisible3 = false;
                this.getInfo();
              },
            });
            this.canRefund = true;
          }).catch((err) => {
            console.log(err);
            this.canRefund = true;
          });
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/hotel/order/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.red {
  color: #ed5656;
}

::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-drawer__header {
  background: #fafbfe;
  padding: 18px 24px;
  margin: 0;

  span {
    font-size: 20px;
    font-weight: bold;
    color: #293c73;
  }
}

.header {
  padding: 20px 24px 20px 24px;
  margin-top: -10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eaedf1;
  border-bottom: 1px solid #eaedf1;

  img {
    width: 56px;
  }

  .mid {
    width: 100px;
    flex: 1;
    margin: 0 8px;

    & > div {
      &:first-child {
        span {
          &:first-child {
            font-size: 16px;
            font-weight: bold;
            color: #293c73;
            vertical-align: middle;
          }

          &:last-child {
            width: 52px;
            height: 25px;
            background: linear-gradient(270deg, #2bc1ff 0%, #1372ff 100%);
            border-radius: 4px;
            display: inline-block;
            margin-left: 8px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 25px;
            transform: scale(0.88);
            vertical-align: middle;
          }
        }
      }

      &:last-child {
        font-size: 14px;
        color: #293c73;
        margin-top: 8px;
      }
    }
  }

  .right {
    span {
      width: 64px;
      height: 24px;
      background: #1372ff;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      display: inline-block;
      text-align: center;
      line-height: 24px;
      color: #fff;
    }
  }
}
.contentBox {
  padding: 0 24px;
  overflow-y: auto;
  padding-bottom: 100px;
  height: calc(100vh - 160px);
}
.subtit {
  font-size: 14px;
  font-weight: bold;
  color: #293c73;
  margin: 24px 0 16px;
  position: relative;
  padding-left: 11px;

  .addMoney {
    position: absolute;
    font-size: 12px;
    color: #3650d9;
    line-height: 16px;
    right: 0;
    top: 0;

    img {
      height: 16px;
    }
  }

  &::after {
    display: block;
    content: "";
    height: 14px;
    top: 1px;
    left: 0;
    background: #1372ff;
    width: 3px;
    position: absolute;
  }
}

.box {
  background: #fafbfe;
  border-radius: 10px;

  .top {
    padding: 16px 15px;

    img {
      width: 20px;
    }

    span {
      display: inline-block;

      &:nth-of-type(1) {
        font-size: 14px;
        font-weight: bold;
        color: #293c73;
        margin: 0 8px;
      }

      &:nth-of-type(2) {
        text-align: center;
        width: 52px;
        height: 21px;
        line-height: 21px;
        font-size: 12px;
        background: rgba(19, 114, 255, 0.1);
        border-radius: 4px;
        border: 1px solid #1372ff;
        color: #1372ff;
      }
    }
  }

  .row {
    padding: 16px 16px 0 16px;

    .li {
      margin-bottom: 16px;
    }
  }
}

.footer {
  width: 100%;
  height: 96px;
  background: #fafbfe;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;

  .left {
    color: #293c73;

    span {
      font-size: 16px;
      font-weight: bold;
      color: #ed5656;
    }
  }
}
.ss {
  border: none !important;
  color: #fff !important;
  margin-left: 10px;
}
</style>
